
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>代码重构与技术提升 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>代码重构与技术提升 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">代码重构的核心定义是什么？它与添加新功能或修复Bug有何根本区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">代码重构是对现有代码进行修改、调整和优化，以提高其可读性、可维护性、性能等，但核心前提是不会改变其外部行为或功能。它与添加新功能或修复Bug的根本区别在于，重构不改变代码的外部功能，只优化内部结构。</div>
          </div>
          <div class="card-source">来源: 1.1 什么是代码重构？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">为什么要进行代码重构？请列举文档中提到的四个主要原因。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">进行代码重构的四个主要原因包括：1. 提高代码可读性，使团队成员更容易理解和维护；2. 增强代码可维护性，降低未来修改的难度和风险；3. 优化性能，通过去除冗余和优化算法提高运行效率；4. 减少技术债务，清理低质量代码，避免问题积累。</div>
          </div>
          <div class="card-source">来源: 1.2 为什么要进行代码重构？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">原则</div>
          <div class="card-question">在进行代码重构时，为了确保不破坏现有功能，最重要的原则和实践是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">原则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">最重要的原则是“保持功能不变”，即确保代码的外部行为在重构前后保持一致。为了保障这一点，关键的实践是“重构前进行测试”，即确保代码有完整的单元测试和集成测试覆盖，这些测试在重构过程中充当“安全网”。</div>
          </div>
          <div class="card-source">来源: 2.2 保持功能不变 和 2.3 重构前进行测试</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">什么是“魔法数字”，文档推荐用哪种重构技巧来处理它？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“魔法数字”是指代码中直接使用的、没有任何描述性含义的硬编码数值。文档推荐使用“替换魔法数字（Replace Magic Numbers with Constants）”这一技巧，即用有意义的常量来替代这些数字，以提高代码的可读性和可维护性。</div>
          </div>
          <div class="card-source">来源: 3.2 替换魔法数字（Replace Magic Numbers with Constants）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中提到的“提炼函数 (Extract Method)”重构技巧具体指什么？它能带来什么好处？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“提炼函数”是指将一段代码从一个较大的方法中提取出来，封装成一个独立的函数。这样做的好处是能够提高代码的可读性，减少代码重复，并方便未来的修改和扩展。</div>
          </div>
          <div class="card-source">来源: 3.1 提炼函数（Extract Method）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">陷阱</div>
          <div class="card-question">什么是“重构过度”，它可能会导致什么负面后果？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">陷阱</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“重构过度”是指进行了不必要的修改，从而可能导致代码的复杂性增加而不是减少。应当避免过度设计和过度优化，确保每次修改都是必要的并能带来可见的改善。</div>
          </div>
          <div class="card-source">来源: 4.2 重构过度</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">除了个人技术实践，为什么在团队中进行重构时，“缺乏团队协作”会成为一个陷阱？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为重构是一个需要团队协作的过程，尤其是在大型团队中。如果缺乏沟通，个人的重构方向可能与团队的整体技术架构不符，从而引发问题。因此，开发人员应与团队成员保持沟通，确保方向一致。</div>
          </div>
          <div class="card-source">来源: 4.3 缺乏团队协作</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">代码重构除了能优化代码本身，对开发者个人技术提升有哪些帮助？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">代码重构能帮助开发者：1. 提高代码质量，在实践中掌握更高效的编程技巧；2. 培养良好的编码习惯，避免技术债务积累；3. 深入理解设计模式，通过实际应用提升架构设计能力。</div>
          </div>
          <div class="card-source">来源: 5. 代码重构与技术提升的关系</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">除了在项目中进行重构，文档还提到了哪些实现个人技术提升的方法？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提到的其他技术提升方法包括：1. 持续学习新技术，如参加会议、阅读书籍博客等；2. 积累实践和项目经验，在解决实际问题中成长；3. 参与代码审查与合作，通过与他人讨论学习更好的编程技巧和设计理念。</div>
          </div>
          <div class="card-source">来源: 6. 如何实现技术提升</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
